<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            
            #box {
                width: 200px;
                height: 200px;
                background: red;
            }

        </style>
        <script src="WGQuery.js"></script>
        <script>
            
            // console.log(document.querySelectorAll('.a'));
            // console.log(document.getElementById('box'));

            /*
            window.onload = function() {
                console.log(document.querySelectorAll('.a'));
                console.log(document.getElementById('box'));
                console.log(1111);
            };

            document.addEventListener('DOMContentLoaded', function() {

                console.log(document.querySelectorAll('.a'));
                console.log(document.getElementById('box'));
                console.log(2222);

            });
            */

            // $(function() {
            //     console.log(document.querySelectorAll('.a'));
            //     console.log(document.getElementById('box'));
            //     console.log(2222);

            // });


        </script>
    </head>
    <body>

        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>

        <div id="box"></div>
        
    </body>
</html>

<script>
    
    // 之前
    // var aDivs = document.getElementsByClassName('a');
    // var aDivs = document.querySelectorAll('.a');
    // console.log(aDivs);

    // var aDivs = $('.a');
    // console.log(aDivs);

    // console.log($('#box'));
    // $('#box')[0].style.height = "200px";
    // $('#box')[0].style.width = "200px";
    // $('#box')[0].style.background = "red";

    // $('.a').css('height', '200px');
    // $('.a').css('width', '200px');
    // $('.a').css('border', '2px solid black');

    // $('.a').css('height', '200px').css('width', '35px').css('border', '2px solid black');

    // $('#box').css('height', '100px').css('width', '100px').css('background', 'blue');

    // console.log($('#box')[0].style.width);

    // console.log(getComputedStyle($('#box')[0])['backgroundColor']);

    // console.log($('.a').css('height'));

    $('.a').css({
        height: '200px', 
        width: function(i) {
            return 200 + i * 50 + 'px';
        },
        backgroundColor: 'yellow'
    }).css('border', "5px solid blue");

    // $('.a')
    //     .css('height', '35px')
    //     .css('background', 'orange')
    //     .css('width', function(i) {
    //         return 200 + i * 50 + 'px';
    //     });

    // var boxDiv = document.getElementById('box');

    // $(boxDiv).css('background', 'black');

    // $('.a').click(function(e) {

    //     $('.a').css('background', 'yellow');
    //     $(this).css('background', 'red');

    // });


    
</script>